
<template>
  <div class="pagination-wrapper">
    <div class="page-left">
      <slot></slot>
    </div>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageData.pageNum"
                   :page-size="pageData.pageRow" :total="pageData.totalCount" :page-sizes="pageData.pageSizes" :layout="pageData.layout"
                   background>
    </el-pagination>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'xypagination',
  data () {
    return {
      pageData: {
        pageNum: 1,
        pageRow: 10,
        totalCount: 0,
        pageSizes: [10, 20, 50, 100],
        layout: 'total, sizes, prev, pager, next, jumper'
      }
    }
  },
  computed: mapState({
    paginationDefultData: state => state.app.paginationDefultData
  }),
  props: [
    'pageDefultData'
  ],
  watch: {
    pageDefultData: {
      deep: true,
      handler (newVal, oldVal) {
        this.pageData = Object.assign(this.pageData, newVal)
      }
    }
  },
  created () {
  },
  mounted () {
    this.pageData = Object.assign(this.pageData, this.pageDefultData)
  },
  methods: {
    pageDataChange () {
      let data = {
        pageNum: this.pageData.pageNum,
        pageRow: this.pageData.pageRow
      }
      this.$emit('pageChange', data)
    },
    handleSizeChange (val) {
      this.pageData.pageRow = val
      this.pageData.pageNum = 1
      this.pageDataChange()
    },
    handleCurrentChange (val) {
      this.pageData.pageNum = val
      this.pageDataChange()
    }
  }
}
</script>
